<%@ taglib prefix="s" uri="/struts-tags"%>
<%@page contentType="text/html;charset=UTF-8"%>

	<script type="text/javascript">
		// URL to call ajax
		var LIST_ACCOUNT_URL   = "<s:url value='/account/accountAjax_SearchAccount'/>";
		var ASSIGN_ACCOUNT_URL = "<s:url value='/account/accountAjax_AssignAccount'/>";

		var REMOVE_GROUP_ACCOUNT_URL = "<s:url value='/account/accountAjax_DeleteGroupAccount'/>";
		var LIST_REMAIN_GROUP_URL  = "<s:url value='/account/accountAjax_SearchRemainGroup}'/>";

		var url;
		
		// Assign formatter
		function assignFormatter(value,row,index){
			var s = '<a href="#" class="btnlogin" onclick="assginAccountToGroup(this)">Assign</a> ';
			return s;
		}

		function assginAccountToGroup(target){
			var asSel = $("#assignedGroupInfoList");
		    asSel.html('');
		    
			$('#dlg').dialog('open').dialog('setTitle','Assgin Account');
			$('#fm').form('clear');
			url = ASSIGN_ACCOUNT_URL;

			var index = getRowIndex(target);
			var row = $('#dg').datagrid('getRows')[index];
			//alert(row.accountNo);
			$('#selectedAccountNo').val(row.accountNo);
			// load remian group
			reloadRemainGroups(row.accountNoEn);
		}
		
		function assginAccount(){
			$('#fm').form('submit',{
				url: url,
				onSubmit: function(){
					var valid = $(this).form('validate'); 
					if (valid) {
						$.messager.progress(); 
					}
					return valid;
				},
				success: function(result){
					$.messager.progress('close');
					var result = eval('('+result+')');
					if (result.successMessage != ''){
						$.messager.alert('Info', result.successMessage);
						reloadRemainGroups(result.selectedAccountNoEn);
						doSearchAccount();	// reload the user data
					} else {
						$.messager.alert('Error', result.failMessage);
					}
				}
			});
		}
		function removeGroupAccount(groupAccountId, accountNoEn){
			if (groupAccountId != null && groupAccountId != undefined){
				$.messager.confirm('Confirm','Are you sure you want to remove this assignement?',function(r){
					if (r){
						$.post(REMOVE_GROUP_ACCOUNT_URL,
							{
								groupAccountId  : groupAccountId
							},
							function(result){
							if (result.successMessage){
								$.messager.alert('Info', result.successMessage);
								reloadRemainGroups(accountNoEn);
							} else {
								$.messager.alert('Error', result.failMessage);
							}
						},'json');
					}
				});
			}
		}

		function reloadRemainGroups(selectedAccountNo) {
			// update remain group for the selected account
			$.post(LIST_REMAIN_GROUP_URL,{selectedAccountNo:selectedAccountNo},function(result){
				var sel = $("#selectedGroupCode");
			    sel.empty();
			    sel.append('<option value="" selected>-- select group --</option>');
				if (result.groupInfoList != null){
					var data = result.groupInfoList;
				    for (var i=0; i<data.length; i++) {
				      sel.append('<option value="' + data[i].groupCode + '">' + data[i].groupName + '</option>');
				    }
				}
				var asSel = $("#assignedGroupInfoList");
			    asSel.html('');
				if (result.assignedGroupInfoList != null){
					var asData = result.assignedGroupInfoList;
					var accNoEn = '';
				    for (var i=0; i<asData.length; i++) {
				    	accNoEn = "'" + asData[i].accountNoEn + "'";
				    	asSel.append('<div class="fitem">'+ (i+1) + ': ' + '<label><a href="#" onclick="removeGroupAccount('+asData[i].groupAccountId+','+ accNoEn + ')">Remove</a></label>' + asData[i].groupName + '</div>');
				    }
				}
			},'json');
		}

		function getRowIndex(target){
			var tr = $(target).closest('tr.datagrid-row');
			return parseInt(tr.attr('datagrid-row-index'));
		}

		
		function doSearchAccount() {  
		    $('#dg').datagrid('load',{ 
		    	'accountInfo.accountNo': $('#search_accountNo').val()
		    });
		}
		
		$(document).ready(function() {
			
			$('#search_button').click(function(){
				doSearchAccount();
			});
		});

	</script>

<center>
	<h2>Security Module - Manage Account</h2>
</center>
<center>
	<form id="searchAccountForm" method="post">
		<table width="90%">
			<tr>
				<td align="center" width="30%"><label>Account No: </label></td>
				<td width="70%"><s:textfield type="text" name="accountInfo.accountNo" id="search_accountNo" theme="simple" /></td>
			</tr>
			<tr>
				<td width="30%">&nbsp;</td>
				<td width="70%">
					<a href="#" class="easyui-linkbutton" id="search_button">Search</a>
				</td>
			</tr>
		</table>
	</form>
	<table id="dg" title="Account List" class="easyui-datagrid" style="width:850px;height:auto"
			toolbar="#toolbar" fitColumns="true"
			data-options="
				rownumbers:true,  
                singleSelect:true,  
                autoRowHeight:false,  
                singleSelect: true,
                pagination:true, 
                pageSize:50,
				url: LIST_ACCOUNT_URL,
				loadFilter: function(data) {
					if (data.groupAccountList !== null && data.groupAccountList !== undefined) {
						return {rows: data.groupAccountList, total: data.pagingInfo.total}
					} else {
						return {rows: [], total: 0}
					}					
				},
				method: 'post'
			">
		<thead>
			<tr>
				<th data-options="field:'accountNo',width:150">Account No</th>
				<th data-options="field:'accountNoEn',hidden:true"></th>
				<th data-options="field:'displayCreatedDate',width:150">Created Date</th>
				<th data-options="field:'assign',width:100,align:'center',formatter:assignFormatter">Action</th>
			</tr>
		</thead>
	</table>
	<div id="toolbar">
	</div>
</center>

	<div id="dlg" class="easyui-dialog" style="width:400px;height:auto;padding:10px 20px"
			closed="true" buttons="#dlg-buttons">
		<div class="ftitle">Assign Account To Group</div>
		<form id="fm" method="post" novalidate>
			<s:hidden name="selectedAccountNo" id="selectedAccountNo"/>
			<div class="fitem">
				<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="assginAccount()">Assgin</a>
			</div>
			<div class="fitem">
				<select name="selectedGroupCode" id="selectedGroupCode" class="easyui-validatebox" required="true">
					<option value="">--select group--</option>
				</select>
			</div>
		</form>
		<div class="ftitle">Assigned Groups</div>
		<div class="fitem" style="width: 100%" id="assignedGroupInfoList"></div>
	</div>
	<div id="dlg-buttons">
		<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
	</div>
